import React, { useEffect } from 'react';
import { Popover, Input, List, Pagination } from 'antd';
import './index.less';
import { useState } from 'react';
import $http from "@/services"
import useCommon from '@/hook/useCommon';
const { Search } = Input;


const DropPopover = ({
  searchType,
  getnewValue,
  interfaced, placeValue }) => {
  const [dataLists, setDataLists] = useState([])
  const [page, setPage] = useCommon(0);
  const [total, setTotal] = useState(10);
  const [isOpen, setisOpen] = useState(false)

  // 获取数据
  const initListsData = async (queryData = {}) => {
    if (!queryData[searchType]) {
      queryData = {};
    }
    const { data } = await $http[interfaced]({
      page: page.current,
      size: 5,
      queryData
    });
    setDataLists(data.list || data.staffList);
    setTotal(data.total || data.staffTotal);
  }

  // 搜索处理事件
  const onSeacrch = (search) => {
    initListsData({ [searchType]: search })
  }

  // 当为空时自动搜索
  const onChangeValue = (e) => {
    if (!e.target.value) {
      initListsData();
    }
  }

  // 最开始操作
  useEffect(() => {
    setPage(1);
    initListsData();
  }, [])
  // 修改页码后做的事情
  const changePage = (currentPage) => {
    setPage(currentPage);
    initListsData();
  }
  const PovContent = (
    <List
      dataSource={dataLists}
      footer={<Pagination
        pageSize={5}
        current={page.current}
        onChange={changePage}
        total={total}>
      </Pagination>}
      renderItem={(item) => {

        return (<List.Item
          key={item._id}
          style={{ cursor: 'pointer' }}
          onClick={() => selectValue({ itemName: searchType.split("N")[0], ...item })}>{item[searchType]}</List.Item>)
      }}
    >

    </List>)
  // 传递value给过去
  const selectValue = (item) => {

    getnewValue(item);
    setisOpen(false);
  }
  return (
    <>
      <Popover
        placement="bottomRight"
        open={isOpen}
        onOpenChange={() => setisOpen(!isOpen)}
        title={<Search onSearch={onSeacrch}
          placeholder={placeValue}
          onChange={onChangeValue}></Search>}
        content={PovContent}
        trigger="click"
      >
        <span className="add-icon">+</span>
      </Popover>
    </>
  );
};

export default DropPopover;
